<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>校园二手书交易平台</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/index.css">
    <style>* {
        padding: 0px;
        margin: 0px;
        font-family: Microsoft Yahei;
        box-sizing: border-box;
    }

    /*navbar*/

    .nav-info a {
        text-decoration: none; /*color: white;*/
        color: #d6d2d2 !important;
        font-size: 14px;
        line-height: 40px;
        margin-left: 5px;
        margin-right: 25px;
    }

    .nav-info a:hover {
        color: white !important;
    }

    .search-logo img {
        width: 20px;
        margin-left: -6px;
    }

    .menu li a:hover {
        font-weight: 600;
        border: solid #b5aa9a;
        border-width: 0 0 2px 0;
    }

    .menu li {
        height: 50px;
        display: inline-flex;
        justify-content: space-around; /*margin-left: 140px;*/
        padding-top: 18px;
        margin-right: 100px;
    }

    .menu a {
        text-decoration: none;
        color: #3f4247;
    }

    /*轮播图*/

    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:after, blockquote:before, q:after, q:before {
        content: '';
        content: none;
    }


    .book-info {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        justify-content: center;
    }

    .askbook-info span {
        line-height: 23px;
        margin-left: 27px;
        color: #272222d6;
        font-size: 13px;
        word-wrap: break-word;
    }

    /*.book-name{    line-height: 26px;    margin-left: 27px;    font-size: 17px;    color: #ae6d6a;}*/
    .book-detail {
        width: 185px;
        height: 34px;
        line-height: 18px;
        margin-left: 27px;
        color: #272222d6;
        font-size: 13px;
        word-wrap: break-word;
    }

    .book-price {
        width: 100%;
        height: 34px;
        font-size: 17px;
        line-height: 60px;
        margin-left: 27px;
        color: #880b16;
    }

    .book-buy {
        width: 40px;
        height: 36px;
        padding: 5px;
        margin-left: 45px;
        text-decoration: none;
        color: white;
        font-size: 13px;
        border: 1px solid #4b4d52;
        border-radius: 2px;
        background: #4b4d52;
    }

    .book-buy:hover { /*font-weight: 600;*/
        background-color: #626a55;
        border: 1px solid #626a55;
        font-weight: 600;
    }

    /*脚步*/
    footer {
        border-top: 1px solid #ccc;
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }

    footer a {
        text-align: center;
        font-size: 15px; /*margin-left: 30%;*/
        text-decoration: none;
        color: rgb(128, 128, 128);
    }</style>
</head>
<body>
<div id="container">
    <div class="book-part" id="article">
        <ul class="book-lists" id="xslist">
            <li class="book-list">
                <a href="#" class="book-pic">
                    <img src="picture/1.jpg"> </a>
                <a href="#" class="book-info"><h5 class="book-name">白夜行</h5>
                    <span class="book-detail">东野圭吾 著 / 南海出版公司 / 2008-09 / 平装</span>
                </a> <span class="book-price">￥12.9
                <a href="bookDetail.html" class="book-buy">立即下单</a>
            </span>
            </li>
        </ul><!--  book-list end -->
    </div><!--  book-part end -->
</div> <!-- container end-->
<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">$(function () {
    $(".book-class li a").on("click", function () {
        var classId = $(this).prop("title");
        console.log(classId);
        var classTop = $("#container").find(("#" + classId)).offset().top;
        $("html,body").animate({scrollTop: classTop + "px"}, 500);
    });
})
console.log(xslist);
let zz = ''
for (let i = 0; i < xslist.length; i++) {
    zz += `<li class="book-list"  id='${xslist[i].id}'>
                  <a href="#" class="book-pic">
                        <img src="${xslist[i].src}">
                              </a>
        <a href="#" class="book-info">
                   <h5 class="book-name">${xslist[i].name}</h5>
                             <span class="book-detail">${xslist[i].user}</span>
                                                                           </a>
                                                                                <span class="book-price">${xslist[i].price}
                                                         <a href="./bookDetail.html?id=${xslist[i].id}" class="book-buy">立即下单</a>
                                                                      </span>
                                                      </li>`
}
$("#xslist").html(zz);
$("#but").click(function () {
    let x = $('#inp').val()
    for (let i = 0; i < xslist.length; i++) {
        if (x == xslist[i].name) {
            $("#xslist").html(`
                <li class="book-list"  id='${xslist[i].id}'>
                             <a href="#" class="book-pic">
                                                <img src="${xslist[i].src}">
                                                                   </a>
 <a href="#" class="book-info">                        <h5 class="book-name">${xslist[i].name}</h5>                        <span class="book-detail">${xslist[i].user}</span>                    </a>                    <span class="book-price">${xslist[i].price}                        <a href="./bookDetail.html?id=${xslist[i].id}" class="book-buy">立即下单</a>                    </span>                </li>`);
        }
    }
});</script>
</body>
</html>